<template>
   <!-- 顶部导航 -->
   <div class="navTop">
        <ul class="courseTop">
            <li :class="flag==0?'active':''" @click="vipHandler"><a>会员专区</a></li>
            <li @click="videoCourse" :class="flag==1?'active':''" ><a>视频课</a></li>
            <li @click="liveCourse" :class="flag==2?'active':''"><a>直播课</a></li>
            <li @click="offlineCourse" :class="flag==3?'active':''"><a>线下课</a></li>
            <li @click="theme" :class="flag==4?'active':''"><a>主题</a></li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
// // 引入仓库，跳转的时候发送请求
// import liveStore from "../../../../store/course/liveCourse"

// import themeStore from "../../../../store/course/theme"
// import courseStore from "../../../../store/course/course"
// import videoStore from "../../../../store/course/videoCourse"


const router = useRouter()

// const liveCoures = liveStore()
// const vipCoure  = courseStore()
// const themeL = themeStore()
// const videoCourseL = videoStore()


let flag = ref(0)
// 切换会员专区的回调
const vipHandler = ()=>{
    flag.value = 0
    router.push({path:'/course/vipCourse'})
    // vipCoure.getCategoryList()
    // vipCoure.getVideoList(20,0,{})
}
// 视频课回调
const videoCourse = ()=>{
    flag.value = 1
    router.push({path:'/course/videoCourse'})
    // videoCourseL.getCategoryList()
    // videoCourseL.getVideoList(20,0,{})
}
// 直播课回调
const liveCourse = ()=>{
    flag.value = 2
    router.push({path:'/course/liveCourse'})
    // liveCoures.getLiveCate()
    // liveCoures.getLiveCourse(20,0,{})
}
// 线下课回调
 const offlineCourse = ()=>{
    flag.value = 3
 }
//  主题回调
const theme = ()=>{
    flag.value = 4
    router.push({path:'/course/theme'})
    // themeL.getTheme()
}
</script>

<style scoped>
/* 顶部导航 */
.navTop {
    background: white;
    text-align: center;
    height: 80px;

   
}

.courseTop {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    /* background-color: rgb(255, 101, 101); */
}

.courseTop li {

    list-style: none;
    margin: 0 20px;

}

.courseTop li a {
    display: inline-block;
    margin: 0 auto;
    height: 80px;
    text-align: center;
    line-height: 80px;
    text-decoration: none;
}

.active {
    border-bottom: solid 3px black;
}

</style>